<template>
  <view class="page-address">
    <view class="form">
      <!-- err-toast-type="modal" -->
      <uni-forms ref="form" :modelValue="data.form" :border="true" :rules="data.rules" :label-width="formLabelWidth">
        <uni-forms-item :label="$t('account.address.info.name')" name="name" required>
          <uni-easyinput :inputBorder="false" :clearable="false" placeholderStyle="font-size:14px" type="text" v-model="data.form.name" :placeholder="$t('account.address.info.name')" />
        </uni-forms-item>
        <uni-forms-item :label="$t('account.address.info.phone')" name="phone">
          <uni-easyinput
            :inputBorder="false"
            :clearable="false"
						placeholderStyle="font-size:14px"
            type="number"
            v-model="data.form.phone"
            :placeholder="$t('account.address.info.phone')"
          />
        </uni-forms-item>
        <uni-forms-item :label="$t('account.address.info.address')" required name="city">
          <view class="address-wrap" @click="updateLocation">
            <view class="address-text" v-if="data.form.zone_id">{{ data.form.country }} {{ data.form.zone }} {{ data.form.city }}</view>
            <view class="no-address" v-else>{{ $t('account.address.info.select_address') }}</view>
            <uni-icons type="forward" size="24" color="#ccc"></uni-icons>
          </view>
        </uni-forms-item>
        <uni-forms-item :label="$t('account.address.info.address_1')" name="address_1" required>
          <uni-easyinput
            :inputBorder="false"
            type="text"
            :clearable="false"
						placeholderStyle="font-size:14px"
            v-model="data.form.address_1"
            :placeholder="$t('account.address.info.address_1')"
          />
        </uni-forms-item>
				<uni-forms-item :label="$t('account.address.info.address_2')" name="address_2">
          <uni-easyinput
            :inputBorder="false"
            type="text"
            :clearable="false"
						placeholderStyle="font-size:14px"
            v-model="data.form.address_2"
            :placeholder="$t('account.address.info.address_2')"
          />
        </uni-forms-item>
        <uni-forms-item :label="$t('account.address.info.default_address')" name="default">
          <switch :checked="data.form.default" @change="(e) => {data.form.default = e.detail.value}" style="transform: scale(0.8)" color="#222" />
        </uni-forms-item>
      </uni-forms>
    </view>

    <address-choose ref="address-choose" :address="data.form" @change="addressChange"></address-choose>
    <view class="submit-wrap"><view @click="submit" class="btn-primary">{{ $t('common.btn_submit') }}</view></view>
  </view>
</template>

<script setup>
const { proxy } = getCurrentInstance()
import { t } from '@/locale/index'
import { useI18n } from 'vue-i18n'
import addressChoose from './components/address-choose'

let id = 0

const data = reactive({
  form: {
    name: '',
    phone: '',
    country_id: 44,
    country: '',
    zone_id: 0,
    zone: '',
    city: '',
    zipcode: '',
    address_1: '',
    address_2: '',
    default: true,
  },

  rules: {
    name: {
      rules: [{ required: true, errorMessage: proxy.$util.replaceI18n('common.error_required', {name: t('account.address.info.name')}), trigger: 'blur' },]
    },
    city: {
      rules: [{ required: true, errorMessage: proxy.$util.replaceI18n('common.error_required', {name: t('account.address.info.address')}), trigger: 'blur' },]
    },
    address_1: {
      rules: [{ required: true, errorMessage: proxy.$util.replaceI18n('common.error_required', {name: t('account.address.info.address_1')}), trigger: 'blur' },]
    },
  },
})

onLoad(e => {
  id = e.id || 0

  if (e.id) {
    loadData()
  }
})

const formLabelWidth = computed(() => {
	return uni.getSystemInfoSync().language === 'zh_cn' ? 74 : 84
})

const loadData = () => {
  proxy.$http.get(`addresses/${id}`).then(res => {
    data.form = res.data
    proxy.$refs['address-choose'].setAddress(res.data)
  })
}

const updateLocation = () => {
	// uni.redirectTo({
	// 	url: '/pages/account/address/select/index',
	// })
  proxy.$refs['address-choose'].showPopup()
}

const addressChange = e => {
  for (let key in e) {
    data.form[key] = e[key]
  }
}

const submit = () => {
  const url = id ? `addresses/${id}` : 'addresses'
  const type = id ? 'put' : 'post'

  proxy.$refs.form.validate().then(() => {
    proxy.$http[type](url, data.form).then(res => {
      proxy.$util.msg({ title: t('common.edit_success'), icon: 'success' }, () => {
        uni.navigateBack()
      })
    })
  })
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
